<template>
  <div id="message">
    <div class="top-back-wrapper">
      <v-top-back siteName="Vue-CN-Node社区 我的消息" ref="topBack"></v-top-back>
    </div>
    <div class="message">
      <div class="message-group">
        <div class="tab-group">
            <span class="tab" :class="{'active':activeTab === tab.value}" v-for="tab in tabs"
                  @click="checkTab(tab.value)">{{tab.title}}</span>
        </div>
        <div class="scroll-wrapper">
          <v-scroll ref="scroll"
                    v-if="currentData.length"
                    :data="currentData">
            <div class="item-list">
              <div class="item" v-for="item in currentData">
                <div class="avatar" @click="lookUserInfo(item.author.loginname,$event)">
                  <img v-lazy="item.author.avatar_url">
                  <span class="avatar-name">{{item.author.loginname}}</span>
                </div>
                <div class="item-info">
                  <span class="item-time">于<strong>{{formatTime(item.create_at)}}</strong>回复了您的话题</span>
                  <div class="topic">
                    <span class="title" @click="topicDetail(item.topic.id,$event)">{{item.topic.title}}</span>
                    <span class="time">最后回复于&nbsp;{{formatTime(item.topic.last_reply_at)}}</span>
                  </div>
                </div>
              </div>
            </div>
          </v-scroll>
        </div>
      </div>
    </div>
    <v-no-login v-if="!isLogin"></v-no-login>
  </div>
</template>

<script type="text/ecmascript-6">
  import TopBack from 'components/top-back/top-back'
  import NoLogin from 'components/no-login/no-login'
  import {checkLogin, Alert, isLogin, Loading} from 'common/js/mixin'
  import {mapGetters, mapActions} from 'vuex'
  import Scroll from 'base/scroll/scroll'
  import moment from 'moment'

  moment.locale('zh-cn')

  export default {
    name: 'message',
    mixins: [checkLogin, Alert, isLogin, Loading],
    data() {
      return {
        tabs: [
          {
            'title': '已读消息',
            'value': 'has'
          },
          {
            'title': '未读消息',
            'value': 'hasnot'
          }
        ],
        activeTab: this.$route.params.state ? this.$route.params.state : 'has',
        error: '',
        msgData: {},
        currentData: []
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'messages'
      ])
    },
    created() {
      this._getMsg()
    },
    methods: {
      checkTab(tab) {
        this.activeTab = tab
      },
      // 查看话题详情
      topicDetail(id, event) {
        if (!event._constructed) {
          return
        }
        this.$router.push({name: 'topic-detail', params: {id: id}})
      },
      // 查看用户信息
      lookUserInfo(loginname, event) {
        if (!event._constructed) {
          return
        }
        this.$router.push({name: 'user', params: {username: loginname}})
      },
      formatTime(time) {
        return moment(time).startOf().fromNow()
      },
      _getMsg() {
        this.showLoading({})
        return this.setMessage({
          'token': this.userInfo.user_token
        }).then((res) => {
          this.closeLoading()
          if (res.success === true) {
            this.msgData = res.data
            this.currentData = this.msgData[`${this.activeTab}_read_messages`]
            return true
          } else {
            return false
          }
        })
      },
      ...mapActions([
        'setMessage'
      ])
    },
    watch: {
      currentData() {
        this.$nextTick(() => {
          if (this.$refs.scroll) {
            this.$refs.scroll.refresh()
          }
        })
      },
      activeTab() {
        this.currentData = this.msgData[`${this.activeTab}_read_messages`]
      }
    },
    activated() {
      this.activeTab = this.$route.params.state ? this.$route.params.state : 'has'
      this._getMsg()
    },
    components: {
      'v-top-back': TopBack,
      'v-no-login': NoLogin,
      'v-scroll': Scroll
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";
  @import "~common/scss/mixin";

  #message {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    .message {
      position: absolute;
      left: 0;
      right: 0;
      top: 45px;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      background-color: #eff2f7;
      padding: 5px;
      box-sizing: border-box;
      .message-group {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: $color-background;
        position: relative;
        .tab-group {
          width: 100%;
          height: 34px;
          display: flex;
          border-bottom: 1px solid #dddddd;
          .tab {
            display: inline-block;
            flex: 1;
            text-align: center;
            line-height: 34px;
            font-size: $font-size-medium;
            border-left: 1px solid #dddddd;
            color: #666666;
            cursor: pointer;
            &:first-child {
              border-left: none;
            }
            &.active {
              color: #000000;
            }
          }
        }
        .scroll-wrapper {
          position: absolute;
          top: 35px;
          left: 0;
          right: 0;
          bottom: 0;
          overflow: hidden;
          .item-list {
            padding: 5px;
            .item {
              margin-top: 10px;
              box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
              box-sizing: border-box;
              padding: 5px;
              display: flex;
              &:first-child {
                margin-top: 0;
              }
              .avatar {
                flex: 0 0 70px;
                width: 70px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                cursor: pointer;
                img {
                  display: inline-block;
                  flex: 0 0 40px;
                  width: 40px;
                  border-radius: 50%;
                }
                .avatar-name {
                  display: inline-block;
                  flex: 0 0 20px;
                  width: 100%;
                  height: 20px;
                  text-align: center;
                  font-size: $font-size-small;
                  color: #999999;
                  line-height: 20px;
                  @include no-wrap;
                }
              }
              .item-info {
                flex: 1;
                overflow: hidden;
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .item-time {
                  height: 20px;
                  line-height: 20px;
                  white-space: nowrap;
                  font-size: $font-size-small;
                  color: $color-text-b;
                  strong {
                    font-weight: bold;
                    padding: 0 5px;
                    color: $color-text-bb;
                  }
                }
                .topic {
                  border: 1px dashed #aaaaaa;
                  background-color: #fbfbfb;
                  display: inline-block;
                  margin-top: 10px;
                  box-sizing: border-box;
                  padding: 5px;
                  overflow: hidden;
                  .title {
                    display: inline-block;
                    width: 100%;
                    overflow: hidden;
                    height: 48px;
                    line-height: 24px;
                    font-size: 15px;
                    color: $color-text-bb;
                    cursor: pointer;
                    @include no-wrap-multi(2)
                  }
                  .time {
                    display: inline-block;
                    width: 100%;
                    height: 16px;
                    line-height: 16px;
                    text-align: right;
                    font-size: $font-size-small;
                    color: #999999;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
